<template>
  <div>
    <!-- <c-r-m-list-head
      :search.sync="search"
      :crm-type="crmType"
      :create-fun="createClick"
      title="产品管理"
      placeholder="请输入产品名称"
      main-title="新建产品"
      @on-handle="listHeadHandle"
      @on-search="crmSearch"
      @on-export="exportInfos"/> -->
    <div
      v-empty="!crm.product.index"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container"
    >
      <!-- <c-r-m-table-head
        ref="crmTableHead"
        :crm-type="crmType"
        :sort-data="sortData"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"/> -->
      <c-r-m-new-head
        ref="crmTableHead"
        :crm-type="crmType"
        :sort-data="sortData"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"
        @on-export="exportInfos"
        @on-search="crmSearch"
        title="产品"
        placeholder="请输入产品名称"
        main-title="新建产品"
      >
      </c-r-m-new-head>
      <div class="table-container">
        <el-table
          v-loading="loading"
          id="crm-table"
          :row-height="40"
          :data="list"
          :height="tableHeight"
          :cell-class-name="cellClassName"
          :row-key="`${crmType}Id`"
          class="n-table--border"
          use-virtual
          highlight-current-row
          style="width: 100%"
          @row-click="handleRowClick"
          @sort-change="sortChange"
          @header-dragend="handleHeaderDragend"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            show-overflow-tooltip
            reserve-selection
            type="selection"
            align="center"
            width="55"
          />
          <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :fixed="index == 0"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="fieldFormatter"
            sortable="custom"
            show-overflow-tooltip
          />
          <el-table-column />
          <el-table-column :resizable="false" fixed="right" width="40">
            <template slot="header" slot-scope="slot">
              <field-set :crm-type="crmType" @change="setSave" />
            </template>
            <template slot-scope="scope" >
              <span style="opacity:0">---</span>
            </template>
          </el-table-column>
          <!-- <wk-empty
            slot="empty"
            :props="{
              buttonTitle: '新建产品',
              showButton: saveAuth,
            }"
            @click="createClick"
          /> -->
        </el-table>
        <div class="p-contianer">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size.sync="pageSize"
            :total="total"
            :pager-count="5"
            class="p-bar"
            background
            layout="prev, pager, next, sizes, total, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <product-detail
      v-if="showDview"
      :id="rowID"
      class="d-view"
      @handle="handleHandle"
      @hide-view="showDview = false"
    />

    <!-- 新建 -->
    <product-create
      v-if="createShow"
      @close="createShow = false"
      @save-success="handleHandle"
    />
  </div>
</template>

<script>
import ProductCreate from "./Create";
import ProductDetail from "./Detail";

import TableMixin from "../mixins/Table";

export default {
  /** 学员管理 的 产品列表 */
  name: "ProductIndex",
  components: {
    ProductCreate,
    ProductDetail,
  },
  mixins: [TableMixin],
  data() {
    return {
      crmType: "product",
      createShow: false,
    };
  },
  computed: {},
  mounted() {},
  methods: {
    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "name") {
        return "can-visit--underline";
      } else {
        return "";
      }
    },

    /**
     * 新建点击
     */
    createClick() {
      this.createShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";
</style>
